<template>
    <div class="commount">
        <el-form 
        :model="form" 
        :rules="rules" 
        ref="ruleForm" 
        label-width="100px" 
        class="demo-ruleForm">
            <el-form-item label="手机号码" prop="mobile">
                <el-input v-model="form.mobile" ></el-input>
            </el-form-item>
            <el-form-item label="用户名" prop="username">
                <el-input v-model="form.username" ></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input type="password" v-model="form.password"  ></el-input>
            </el-form-item>
          
           
           
            <el-form-item>
                <el-button type="primary" @click="zhuce" >注册</el-button>
                <el-button type="primary" >重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>


<script>
import {addyonghuAjax} from "@/api"
  export default {
    data(){
      return{
          form:{},
          rules:{   
              mobile:[
                  {required:true,message:"请输入手机号码",trigger:'blur'},
                  {
                        validator:(rule, value, callback)=>{
                            var mobileReg = /^1(3|5|6|7|8|9)\d{9}$/
                            if(mobileReg.test(value)){
                                callback()
                            }else{
                                callback(new Error("请输入正确的手机号码"));
                            }
                        },
                        trigger:'change'
                    }
              ],
              password:[
                    {required:true,message:"请输入登录密码",trigger:'blur'},
                    {
                        validator:(rule, value, callback)=>{
                            var passReg = /^[A-Za-z0-9]{4,12}$/
                            if(value.length<4){
                                callback(new Error("密码长度至少4位"));
                            }else if(value.length>12){
                                callback(new Error("密码长度最多12位"));
                            }else if(!passReg.test(value)){
                                callback(new Error("请输入正确的密码"));
                                
                            }else{
                                 callback()
                            }
                        },
                        trigger:'change'
                    }
                ],
                username:[
                    {required:true,message:"请输入用户名",trigger:'blur'},
                    {
                        validator:(rule, value, callback)=>{
                            // var passReg = /^[A-Za-z0-9]{4,12}$/
                            if(value.length<2){
                                callback(new Error("用户名长度至少2位"));
                            }else if(value.length>12){
                                callback(new Error("用户名长度最多12位"));
                            }
                            else{
                                 callback()
                            }
                        },
                        trigger:'change'
                    }
                ],
                checkpass:[
                    {required:true,message:"请输入确认密码",trigger:'blur'},
                    {
                        validator:(rule, value, callback)=>{
                            var vbl = document.querySelector("#vbl")
                            console.log(vbl.value)
                            if(value!==vbl.value){
                                callback(new Error("密码输入不一致"));
                            }else{
                                 callback()
                            }
                        },
                        trigger:'change'
                    }
                ]
          },
          radio: '1'
      }
    },
    methods: {
        zhuce(){
            //  this.$refs.myform.validate(valid=>{
                // if(valid){
                    addyonghuAjax(this.form)
                    .then(res=>{
                    
                    })
                // }else{
                //     return false;
                // }
            // })
        }
    }
  
  }


</script>



<style lang="scss" scoped>
.demo-ruleForm{
    padding-right: 50px;
}
.aa{
    margin-left: 40px;
    display: flex;
    flex: 1;
   justify-items: center;
    align-items: center;
    margin-bottom: 10px;
    p{
        margin-right: 20px;
        font-size: 14px;
    }
}

.width100{
    width: 100%;
}

</style>